<!--
 * @Description:
 * @Author bianpengfei
 * @create 2022/11/8 20:20
 -->
<template>
  <div class="page">
    <div class="bg-[#fff] p-12px pb-0">
      <el-form label-width="80px" label-position="right">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="标题">
              <el-input v-model="search.title" placeholder="请输入标题" class="w-full" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="search.time"
                class="!w-full"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="search.status" placeholder="请选择" class="w-full" clearable>
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="3">
            <div class="pl-8px">
              <el-button type="primary">查询</el-button>
              <el-button>重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="mt-10px bg-[#fff] py-8px px-12px">
      <g-title>
        <div class="w-full flex justify-between items-center">
          <span>科研信息列表</span>
          <div>
            <el-button type="primary" size="mini" @click="onShowDialog('add')">科研信息新增</el-button>
          </div>
        </div>
      </g-title>
      <g-table ref="table" v-bind="table" class="absolute flex-1"></g-table>
      <g-pagination v-if="tablePage.total" v-bind.sync="tablePage" class="mt-8px"></g-pagination>
    </div>

    <!-- 新增   -->
    <TheExchangeAddEdit ref="addRef" :visible.sync="visible.add" model="1"></TheExchangeAddEdit>

    <!-- 编辑器   -->
    <TheExchangeAddEdit ref="editRef" :visible.sync="visible.edit" model="2"></TheExchangeAddEdit>
  </div>
</template>

<script>
import { computedElTableHeight } from '@libs/utils/common'
import TheExchangeAddEdit from './components/TheExchangeAddEdit.vue'
export default {
  components: { TheExchangeAddEdit },
  data() {
    return {
      value1: '',
      search: {
        title: '',
        time: [],
        status: ''
      },
      visible: {
        add: false,
        edit: false
      },
      options: [
        { value: '待审核', label: '待审核' },
        { value: '审核通过', label: '审核通过' },
        { value: '审核不通过', label: '审核不通过' }
      ],
      tablePage: {
        page: 1,
        total: 1,
        size: 5,
        background: true,
        layout: 'total, sizes, prev, pager, next'
      },
      table: {
        // 审批待办
        loading: true,
        data: [],
        height: `calc(100vh - 320px)`,
        columns: [
          { type: 'index', label: '序号', width: '120px' },
          { prop: 'title', label: '标题', align: 'center' },
          { prop: 'index', label: '状态', align: 'center' },
          { prop: 'index', label: '审核时间', align: 'center' },
          { prop: 'index', label: '创建时间', align: 'center' },
          { prop: 'index', label: '创建人', align: 'center' },
          { prop: 'index', label: '审核人', align: 'center' },
          { prop: 'index', label: '审核不通过原因', align: 'center' },
          { slot: 'operation', label: '操作', width: '150px', align: 'center' }
        ]
      }
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {
    this.$once('hook:beforeDestroy', () => {
      // this.removeEvents()
    })
    this.$nextTick(() => {
      // this.table.height = computedElTableHeight(this.$refs.table.$el)
    })
  },

  methods: {
    onShowDialog(type) {
      if (type == 'add') {
        this.visible.add = true
      } else if (type == 'edit') {
        this.visible.edit = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
}
</style>
